<script setup lang="ts">
import { reactive, ref } from "vue";
import message from "@arco-design/web-vue/es/message";
import { UserControllerService, UserLoginRequest } from "../../../generated";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/user";

const router = useRouter();
const userStore = useUserStore();
const form = reactive({
  userAccount: '',
  userPassword: '',
} as UserLoginRequest);

const isLoading = ref(false);

const handleSubmit = async () => {
  isLoading.value = true;
  try {
    const res = await UserControllerService.userLoginUsingPost(form);
    if (res.code === 0) {
      message.success("登录成功");
      userStore.setToken(res.data.token);
      userStore.setLoginUser(res.data.userName);
      userStore.loginUser.userRole = res.data.userRole;
      console.log(res.data)
      userStore.setUserId(res.data.id.id)
      router.push({ path: '/', replace: true });
    } else {
      message.error("登录失败：" + res.message);
    }
  } catch (error) {
    message.error("网络请求异常");
  } finally {
    isLoading.value = false;
  }
};
</script>

<template>
  <div id="userLogin">
    <div class="login-container">
      <a-form
        class="login-form"
        :model="form"
        auto-label-width
        @submit="handleSubmit"
      >
        <h2 class="form-title">用户登录</h2>

        <a-form-item field="userAccount" label="账号">
          <a-input
            v-model="form.userAccount"
            placeholder="请输入账号"
            size="large"
            allow-clear
            class="custom-input"
          >
            <template #prefix>
              <i class="iconfont icon-user"></i>
            </template>
          </a-input>
        </a-form-item>

        <a-form-item field="userPassword" label="密码">
          <a-input-password
            v-model="form.userPassword"
            placeholder="请输入密码"
            size="large"
            allow-clear
            class="custom-input"
          >
            <template #prefix>
              <i class="iconfont icon-lock"></i>
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
            size="large"
            :loading="isLoading"
            class="submit-btn"
          >
            {{ isLoading ? '登录中...' : '立即登录' }}
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<style scoped lang="less">
#userLogin {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);

  .login-container {
    width: 100%;
    max-width: 400px;
    padding: 0 20px;

    .login-form {
      background: white;
      padding: 40px 30px;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      transition: transform 0.2s ease;

      &:hover {
        transform: translateY(-2px);
      }

      .form-title {
        text-align: center;
        margin-bottom: 30px;
        color: #2d3748;
        font-size: 24px;
        position: relative;

        &::after {
          content: '';
          display: block;
          width: 50px;
          height: 3px;
          background: #3498db;
          margin: 12px auto 0;
          border-radius: 2px;
        }
      }

      :deep(.arco-form-label-item > label) {
        color: #4a5568;
        font-weight: 500;
      }

      .custom-input {
        border-radius: 8px;
        transition: all 0.2s;

        &:hover {
          border-color: #3498db;
        }

        .iconfont {
          color: #718096;
          font-size: 16px;
        }
      }

      .submit-btn {
        width: 100%;
        font-size: 16px;
        height: 46px;
        border-radius: 8px;
        transition: all 0.2s;

        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
        }

        &:active {
          transform: translateY(0);
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .login-container {
    padding: 0 15px !important;

    .login-form {
      padding: 30px 20px !important;
    }
  }
}
</style>
